// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@import 'includes/base';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
@import "../../protocol/components/video";
@import 'includes/mofo-donate-cta';

.wnp-footer {
    text-align: center;
}

.wnp-content-main {
    background: #6863e5 linear-gradient(260deg, #ad35dc -30%, #6863e5 60%, #452789 110%);
    color: $color-white;
    padding-top: 50px;

    .wnp-main-title {
        @include font-size(40px);
        color: $color-white;
        margin: $spacing-xl 0 $spacing-lg;

        @media #{$mq-lg} {
            @include font-size(56px);
        }
    }

    .wnp-main-body {
        @include font-firefox;
        @include text-title-xs;
        color: $color-white;
    }

    .mzp-c-video {
        border: 2px solid $color-white;
        border-radius: $border-radius-md;
    }
}

.wnp-action-container {
    @include border-box;
    background-color: $color-white;
    border-radius: $border-radius-sm;
    color: $color-black;
    margin-bottom: $spacing-xl;
    padding: 82px $spacing-lg $spacing-lg;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    @media #{$mq-md} {
        margin-bottom: 0;
    }

    h2 {
        @include text-title-xs;
    }

    .c-cta-button {
        @include font-firefox;
        appearance: none;
        background: 0;
        border: 0;
        color: $color-link;
        cursor: pointer;
        font-weight: bold;
        padding: 0;
        text-decoration: underline;

        &:hover,
        &:focus {
            text-decoration: none;
        }
    }

    .wnp-sticker-heart {
        position: absolute;
        top: -28px;
        left: 94px;

        @media #{$mq-md} {
            top: -40px;
            left: 16px;
        }
    }

    .wnp-sticker-fox {
        position: absolute;
        top: -2px;
        left: -28px;

        @media #{$mq-md} {
            top: 48px;
            left: -72px;
        }
    }

    .wnp-sticker-happy {
        position: absolute;
        top: -48px;
        left: 30px;

        @media #{$mq-md} {
            top: -16px;
            left: -40px;
        }
    }

    .wnp-sticker-chat {
        position: absolute;
        bottom: -48px;
        right: -24px;

        @media #{$mq-md} {
            right: -64px;
        }
    }
}

.c-cta-button.js-new-tab,
.mzp-c-button.js-new-tab {
    display: none;

    &.show {
        display: inline-block;
    }
}
